<template>
  <div>
    <a-collapse :default-active-key="[1, 2, 3, 4, 5, 6]" :bordered="false">
      <a-collapse-item header="套餐设置" :key="1">
        <div class="chooseBox">
          <p class="title">套餐样式</p>
          <div class="radioBox">
            <a-radio-group v-model="currentTemp.styleType">
              <a-radio :value="1">
                <template #radio="{ checked }">
                  <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                    <div className="custom-radio-card-mask">
                      <div className="custom-radio-card-mask-dot"></div>
                    </div>
                    <div className="custom-radio-card-title">样式1</div>
                  </div>
                </template>
              </a-radio>
              <a-radio :value="2">
                <template #radio="{ checked }">
                  <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                    <div className="custom-radio-card-mask">
                      <div className="custom-radio-card-mask-dot"></div>
                    </div>
                    <div className="custom-radio-card-title">样式2</div>
                  </div>
                </template>
              </a-radio>
              <a-radio :value="3">
                <template #radio="{ checked }">
                  <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                    <div className="custom-radio-card-mask">
                      <div className="custom-radio-card-mask-dot"></div>
                    </div>
                    <div className="custom-radio-card-title">样式3</div>
                  </div>
                </template>
              </a-radio>
            </a-radio-group>
          </div>
        </div>
        <div class="chooseBox">
          <p class="title">选中样式</p>
          <div class="radioBox">
            <a-radio-group v-model="currentTemp.activeType">
              <a-radio :value="1">
                <template #radio="{ checked }">
                  <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                    <div className="custom-radio-card-mask">
                      <div className="custom-radio-card-mask-dot"></div>
                    </div>
                    <div className="custom-radio-card-title">样式1</div>
                  </div>
                </template>
              </a-radio>
              <a-radio :value="2">
                <template #radio="{ checked }">
                  <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                    <div className="custom-radio-card-mask">
                      <div className="custom-radio-card-mask-dot"></div>
                    </div>
                    <div className="custom-radio-card-title">样式2</div>
                  </div>
                </template>
              </a-radio>
            </a-radio-group>
          </div>
        </div>
        <div class="chooseBox">
          <p class="title">显示位置</p>
          <div class="radioBox">
            <a-radio-group v-model="currentTemp.showPosi">
              <a-radio :value="1">
                <template #radio="{ checked }">
                  <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                    <div className="custom-radio-card-mask">
                      <div className="custom-radio-card-mask-dot"></div>
                    </div>
                    <div className="custom-radio-card-title">靠左</div>
                  </div>
                </template>
              </a-radio>
              <a-radio :value="2">
                <template #radio="{ checked }">
                  <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                    <div className="custom-radio-card-mask">
                      <div className="custom-radio-card-mask-dot"></div>
                    </div>
                    <div className="custom-radio-card-title">居中</div>
                  </div>
                </template>
              </a-radio>
            </a-radio-group>
          </div>
        </div>
        <div class="chooseBox">
          <p class="title">最高高度</p>
          <div class="radioBox" style="padding: 0px">
            <a-input type="text" v-model="currentTemp.maxHeight" placeholder="请输入高度" />
          </div>
          <p class="beizhu">
            套餐超出最高高度后，滚动时只能在固定高度内进行上下滑动，可以节省空间
          </p>
        </div>
      </a-collapse-item>
      <a-collapse-item header="套餐样式" :key="2" v-if="currentTemp.styleType == 3">
        <div class="items">
          <p class="names">第一行</p>
          <div class="lineBox">
            <a-select v-model="currentComp.line1.text" :style="{ width: '150px' }">
              <a-option value="price_time">售价+时间</a-option>
              <a-option value="name">套餐名称</a-option>
              <a-option value="price">套餐售价</a-option>
              <a-option value="outline">划线价</a-option>
              <a-option value="userText">左上文字</a-option>
              <a-option value="userText2">左下文字</a-option>
            </a-select>

            <a-input-number
              :style="{ width: '100px' }"
              hide-button
              v-model="currentComp.line1.px"
              placeholder="请输入字体大小"
            >
              <template #suffix> px </template></a-input-number
            >
            <div class="sliderBox_color">
              <div
                style="
                  width: 40px;
                  height: 40px;
                  cursor: pointer;
                  border: 6px solid #f5f5f5;
                  border-radius: 4px;
                "
                :style="{ backgroundColor: currentComp.line1.bgColor }"
                @click="changSketchStateLine(1)"
              ></div>

              <Sketch
                class="setColor"
                v-model="currentComp.line1.bgColor"
                :show="colorForm.showSketchLine1"
                @changButton="changSketchLine($event, 1)"
              />

              <a-button type="text" @click="currentComp.line1.bgColor = '#ffffff'">重置</a-button>
            </div>
          </div>
        </div>
        <div class="items">
          <p class="names">第二行</p>
          <div class="lineBox">
            <a-select v-model="currentComp.line2.text" :style="{ width: '150px' }">
              <a-option value="price_time">售价+时间</a-option>
              <a-option value="name">套餐名称</a-option>
              <a-option value="price">套餐售价</a-option>
              <a-option value="outline">划线价</a-option>
              <a-option value="userText">左上文字</a-option>
              <a-option value="userText2">左下文字</a-option>
            </a-select>
            <a-input-number
              :style="{ width: '100px' }"
              hide-button
              v-model="currentComp.line2.px"
              placeholder="请输入字体大小"
            >
              <template #suffix> px </template></a-input-number
            >
            <div class="sliderBox_color">
              <div
                style="
                  width: 40px;
                  height: 40px;
                  cursor: pointer;
                  border: 6px solid #f5f5f5;
                  border-radius: 4px;
                "
                :style="{ backgroundColor: currentComp.line2.bgColor }"
                @click="changSketchStateLine(2)"
              ></div>
              <Sketch
                class="setColor"
                v-model="currentComp.line2.bgColor"
                :show="colorForm.showSketchLine2"
                @changButton="changSketchLine($event, 2)"
              />
              <a-button type="text" @click="currentComp.line2.bgColor = '#ffffff'">重置</a-button>
            </div>
          </div>
        </div>
        <div class="items">
          <p class="names">第三行</p>
          <div class="lineBox">
            <a-select v-model="currentComp.line3.text" :style="{ width: '150px' }">
              <a-option value="price_time">售价+时间</a-option>
              <a-option value="name">套餐名称</a-option>
              <a-option value="price">套餐售价</a-option>
              <a-option value="outline">划线价</a-option>
              <a-option value="userText">左上文字</a-option>
              <a-option value="userText2">左下文字</a-option>
            </a-select>
            <a-input-number
              :style="{ width: '100px' }"
              hide-button
              v-model="currentComp.line3.px"
              placeholder="请输入字体大小"
            >
              <template #suffix> px </template></a-input-number
            >
            <div class="sliderBox_color">
              <div
                style="
                  width: 40px;
                  height: 40px;
                  cursor: pointer;
                  border: 6px solid #f5f5f5;
                  border-radius: 4px;
                "
                :style="{ backgroundColor: currentComp.line3.bgColor }"
                @click="changSketchStateLine(3)"
              ></div>

              <Sketch
                class="setColor"
                v-model="currentComp.line3.bgColor"
                :show="colorForm.showSketchLine3"
                @changButton="changSketchLine($event, 3)"
              />

              <a-button type="text" @click="currentComp.line3.bgColor = '#ffffff'">重置</a-button>
            </div>
          </div>
        </div>
        <div class="items">
          <p class="names">第四行</p>
          <div class="lineBox">
            <a-select v-model="currentComp.line4.text" :style="{ width: '150px' }">
              <a-option value="price_time">售价+时间</a-option>
              <a-option value="name">套餐名称</a-option>
              <a-option value="price">套餐售价</a-option>
              <a-option value="outline">划线价</a-option>
              <a-option value="userText">左上文字</a-option>
              <a-option value="userText2">左下文字</a-option>
            </a-select>
            <a-input-number
              :style="{ width: '100px' }"
              :hide-button="true"
              v-model="currentComp.line4.px"
              placeholder="请输入字体大小"
            >
              <template #suffix> px </template></a-input-number
            >
            <div class="sliderBox_color">
              <div
                style="
                  width: 40px;
                  height: 40px;
                  cursor: pointer;
                  border: 6px solid #f5f5f5;
                  border-radius: 4px;
                "
                :style="{ backgroundColor: currentComp.line4.bgColor }"
                @click="changSketchStateLine(4)"
              ></div>

              <Sketch
                class="setColor"
                v-model="currentComp.line4.bgColor"
                :show="colorForm.showSketchLine4"
                @changButton="changSketchLine($event, 4)"
              />

              <a-button type="text" @click="currentComp.line4.bgColor = '#ffffff'">重置</a-button>
            </div>
          </div>
        </div>
      </a-collapse-item>
      <a-collapse-item header="间距(px)" :key="5">
        <div class="sliderBox">
          <p>上边距</p>
          <a-slider
            v-model="currentTemp.paddingTop"
            show-input
            style="width: 100%"
            :min="0"
            :max="100"
          />
        </div>
        <div class="sliderBox">
          <p>下边距</p>
          <a-slider
            v-model="currentTemp.paddingBottom"
            show-input
            style="width: 100%"
            :min="0"
            :max="100"
          />
        </div>
        <div class="sliderBox">
          <p>左右边距</p>
          <a-slider
            v-model="currentTemp.paddingTwice"
            show-input
            style="width: 100%"
            :min="0"
            :max="100"
          />
        </div>
      </a-collapse-item>
      <a-collapse-item header="圆角设置(px)" :key="6">
        <div class="sliderBox">
          <p>上圆角</p>
          <a-slider
            v-model="currentTemp.radiusNumTop"
            show-input
            style="width: 100%"
            :min="0"
            :max="100"
          />
        </div>
        <div class="sliderBox">
          <p>下圆角</p>
          <a-slider
            v-model="currentTemp.radiusNumBottom"
            show-input
            style="width: 100%"
            :min="0"
            :max="100"
          />
        </div>
      </a-collapse-item>
      <a-collapse-item header="背景设置" :key="4">
        <div class="chooseBox">
          <p class="title">展示类型</p>
          <div class="radioBox">
            <a-radio-group v-model="currentTemp.showType">
              <a-radio :value="1">
                <template #radio="{ checked }">
                  <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                    <div className="custom-radio-card-mask">
                      <div className="custom-radio-card-mask-dot"></div>
                    </div>
                    <div className="custom-radio-card-title">颜色</div>
                  </div>
                </template>
              </a-radio>
              <a-radio :value="2">
                <template #radio="{ checked }">
                  <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                    <div className="custom-radio-card-mask">
                      <div className="custom-radio-card-mask-dot"></div>
                    </div>
                    <div className="custom-radio-card-title">图片</div>
                  </div>
                </template>
              </a-radio>
            </a-radio-group>
          </div>
        </div>
        <div class="uploadBox" style="margin-bottom: 10px" v-if="currentTemp.showType == 2">
          <a-upload
            action="/app/file/upload"
            :show-file-list="false"
            @success="onSuccessBgImage($event)"
            @error="errorBgImage($event)"
            :image-preview="true"
          >
            <template #upload-button>
              <div class="arco-upload-list-picture custom-upload-avatar" v-if="currentTemp.bgImage">
                <img style="display: block; width: 80px; height: 80px" :src="currentTemp.bgImage" />
                <div class="arco-upload-list-picture-mask">
                  <IconEdit />
                </div>
              </div>
              <div class="arco-upload-picture-card" v-else>
                <div class="arco-upload-picture-card-text">
                  <IconPlus />
                </div>
              </div>
              <!-- </div> -->
            </template>
          </a-upload>
        </div>

        <div class="sliderBox_color2" v-if="currentTemp.showType == 1">
          <p style="width: 100%; margin-bottom: 5px">填充颜色</p>
          <div
            style="
              width: 40px;
              height: 40px;
              cursor: pointer;
              border: 6px solid #f5f5f5;
              border-radius: 4px;
            "
            :style="{ backgroundColor: currentTemp.boxBg }"
            @click="changSketch3"
          ></div>

          <Sketch
            class="setColor"
            v-model="currentTemp.boxBg"
            :show="colorForm.showSketchBg"
            @changButton="changSketchBg"
          />

          <a-button type="text" style="margin-left: 12px" @click="currentTemp.boxBg = '#ffffff'"
            >重置</a-button
          >
        </div>
        <div class="sliderBox_color2">
          <p style="width: 100%; margin-bottom: 5px">字体颜色</p>

          <div
            style="
              width: 40px;
              height: 40px;
              cursor: pointer;
              border: 6px solid #f5f5f5;
              border-radius: 4px;
            "
            :style="{ backgroundColor: currentTemp.textColor }"
            @click="changSketch4"
          ></div>

          <Sketch
            class="setColor"
            v-model="currentTemp.textColor"
            :show="colorForm.showSketchFont"
            @changButton="changSketchFont"
          />

          <a-button type="text" style="margin-left: 12px" @click="currentTemp.textColor = '#000'"
            >重置</a-button
          >
        </div>
        <div class="sliderBox_color2">
          <p style="width: 100%; margin-bottom: 5px">选中颜色</p>

          <div
            style="
              width: 40px;
              height: 40px;
              cursor: pointer;
              border: 6px solid #f5f5f5;
              border-radius: 4px;
            "
            :style="{ backgroundColor: currentTemp.textActiveColor }"
            @click="changSketch5"
          ></div>

          <Sketch
            class="setColor"
            v-model="currentTemp.textActiveColor"
            :show="colorForm.showSketchFontActive"
            @changButton="changSketchFont2"
          />

          <a-button
            type="text"
            style="margin-left: 12px"
            @click="currentTemp.textActiveColor = '#000'"
            >重置</a-button
          >
        </div>
      </a-collapse-item>
    </a-collapse>
  </div>
</template>

<script setup lang="ts">
  import { Sketch } from '@ans1998/vue3-color'
  import { computed, watch, ref } from 'vue'
  const emit = defineEmits(['change'])
  const props = defineProps({
    // 选中的当前组件参数
    config: {
      type: Object,
      default: () => {
        return {}
      },
    },
  })
  const currentTemp = computed(() => props.config)

  const currentComp = computed(() =>
    currentTemp.value.tabs == 'setmeal'
      ? currentTemp.value.setMealSet
      : currentTemp.value.balanceSet
  )
  const colorForm = ref({
    showSketchBg: false,
    showSketchFont: false,
    showSketchFontActive: false,
    showSketchLine1: false,
    showSketchLine2: false,
    showSketchLine3: false,
    showSketchLine4: false,
  })
  const changSketchBg = (item: any) => {
    colorForm.value.showSketchBg = false
    console.log(item)
    if (item.isOk) {
      currentTemp.value.boxBg = item.activeColor
    } else {
      console.log('取消')
    }
  }
  const changSketchFont = (item: any) => {
    colorForm.value.showSketchFont = false
    console.log(item)
    if (item.isOk) {
      currentTemp.value.textColor = item.activeColor
    } else {
      console.log('取消')
    }
  }
  const changSketchFont2 = (item: any) => {
    colorForm.value.showSketchFontActive = false
    console.log(item)
    if (item.isOk) {
      currentTemp.value.textActiveColor = item.activeColor
    } else {
      console.log('取消')
    }
  }
  const changSketchLine = (item: any, val) => {
    if (val == 1) {
      colorForm.value.showSketchLine1 = false
    } else if (val == 2) {
      colorForm.value.showSketchLine2 = false
    } else if (val == 3) {
      colorForm.value.showSketchLine3 = false
    } else if (val == 4) {
      colorForm.value.showSketchLine4 = false
    }
    if (item.isOk) {
      if (val == 1) {
        currentComp.value.line1.bgColor = item.activeColor
      } else if (val == 2) {
        currentComp.value.line2.bgColor = item.activeColor
      } else if (val == 3) {
        currentComp.value.line3.bgColor = item.activeColor
      } else if (val == 4) {
        currentComp.value.line4.bgColor = item.activeColor
      }
    } else {
      console.log('取消')
    }
  }
  const changSketch3 = () => {
    colorForm.value.showSketchBg = true
  }

  const changSketchStateLine = (val) => {
    if (val == 1) {
      colorForm.value.showSketchLine1 = true
    } else if (val == 2) {
      colorForm.value.showSketchLine2 = true
    } else if (val == 3) {
      colorForm.value.showSketchLine3 = true
    } else if (val == 4) {
      colorForm.value.showSketchLine4 = true
    }
  }

  const changSketch4 = () => {
    colorForm.value.showSketchFont = true
  }
  const changSketch5 = () => {
    colorForm.value.showSketchFontActive = true
  }
  //背景图上传
  const onSuccessBgImage = (e: any) => {
    currentTemp.value.bgImage = e.response.data.path
    console.log(e)
  }
  const errorBgImage = (e: any) => {
    console.log(e)
    currentTemp.value.bgImage = e.response.data.path
  }
  watch(
    () => currentTemp,
    (newVal, oldVal) => {
      emit('change', newVal.value)
    },
    { immediate: true, deep: true }
  )
</script>

<style scoped lang="less">
  :deep(.arco-upload-picture-card) {
    background: var(--color-bg-1);
  }
  :deep(.arco-collapse-item-content) {
    padding: 4px 0px;
    background: #fff;
    border: none;
    overflow: visible;
  }
  :deep(.arco-collapse-item-content-box) {
    padding: 0px 10px;
  }
  :deep(.arco-collapse-item-header) {
    border: none;
  }
  :deep(.arco-collapse-item) {
    border: none;
  }
  :deep(.arco-slider-track::before) {
    height: 4px;
  }
  :deep(.arco-slider-bar) {
    height: 4px;
  }
  :deep(.arco-collapse-item .arco-collapse-item-icon-hover) {
    position: absolute;
    top: 50%;
    left: 4px;
  }
  :deep(.arco-collapse-item-header-left) {
    padding-left: 24px;
  }
  .sliderBox_color {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 10;
    overflow: visible;
    p {
      min-width: 50px;
      display: inline-block;
      margin-right: 12px;
    }
    .setColor {
      position: absolute;
      right: 10px;
      bottom: 30px;
      z-index: 1000000;
    }
  }
  .sliderBox_color2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 10px;
    position: relative;
    z-index: 10;
    overflow: visible;
    p {
      min-width: 50px;
      display: inline-block;
      margin-right: 12px;
    }
    .setColor {
      position: absolute;
      left: 120px;
      bottom: 30px;
      z-index: 1000000;
    }
  }
  .chooseBox {
    width: 100%;
    margin: 10px 0px;
    .title {
      width: 100%;
      margin-bottom: 5px;
    }
    .beizhu {
      font-size: 11px;
      color: #86909c;
      margin-top: 5px;
    }
    .radioBox {
      width: 100%;
      background-color: #f5f5f5;
      border-radius: 4px;
      height: 35px;
      display: flex;
      align-items: center;
      padding: 0px 10px;
      box-sizing: border-box;
    }
  }
  .items {
    width: 100%;
    margin-bottom: 10px;
    .names {
      width: 100%;
    }
    .lineBox {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
</style>
